<script>
import analysisVideo from "@/practice/pages/index/components/analysisVideo.vue"
export default {
  name: "analysis",
  components: { analysisVideo },
  props: {
    currentQuestion: {
      type: Object,
      default: () => {},
    },
		textQuestionList: {
			type: Array,
			default: () => [],
		}
  },
	methods: {
		//根据选项的mark查出选项的内容
		getOptionContentByMark(mark) {
			for (let question of this.textQuestionList) {
				if (question.mark === mark) {
					return question.content;
				}
			}
		},
	},
	data() {
	  return {
			viewQuestionAnalysis: false,
	  };
	},
	inject: ["root"],
}
</script>

<template>
  <view class="analysis">
    <view class="row">
      <text>你的作答：</text>
      <text v-if="currentQuestion.userAnswer" @click="root.vocabularyDetailPopupOpen(getOptionContentByMark(currentQuestion.userAnswer))">
        <text>{{ currentQuestion.userAnswer }}</text>
        <text>.\t</text>
        <text style="text-decoration: underline">{{ getOptionContentByMark(currentQuestion.userAnswer) }}</text>
      </text>
      <text v-else>未作答</text>
    </view>
    <view class="row">
      <text>正确答案：</text>
      <text
        :class="currentQuestion.answer === currentQuestion.userAnswer ? 'correct' : 'incorrect'"
        @click="root.vocabularyDetailPopupOpen(getOptionContentByMark(currentQuestion.answer))"
      >
        <text>{{ currentQuestion.answer }}</text>
        <text>.\t</text>
        <text style="text-decoration: underline">{{ getOptionContentByMark(currentQuestion.answer) }}</text>
      </text>
    </view>
    <!--						题目解析-->
    <view class="question-analysis" v-if="currentQuestion.analysis || currentQuestion.videoUrl">
      <block v-if="viewQuestionAnalysis">
        <view v-html="currentQuestion.analysis"></view>
        <view style="margin-top: 20rpx">
          <analysis-video :video-file-url="currentQuestion.videoUrl" height="340rpx"></analysis-video>
        </view>
      </block>
      <view class="btn-container" v-else>
        <view class="viewAnalysis-btn" @click="root.checkIsVip() && (viewQuestionAnalysis = true)">查看解析 </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.analysis {
	height: 100%;
	overflow: auto;
	.row {
		font-size: calc(32rpx * var(--font-size-rate));
		line-height: 2;
		margin-top: 10rpx;
		display: flex;
		.part {
			width: 50%;
		}
		.correct {
			color: #1b9b69;
			font-weight: bold;
		}
		.incorrect {
			color: #e94f4f;
			font-weight: bold;
		}
	}
	.question-analysis {
		margin-top: 30rpx;
		.btn-container {
			display: flex;
			justify-content: flex-end;
			.viewAnalysis-btn {
				height: 60rpx;
				padding: 0 40rpx;
				display: flex;
				align-items: center;
				background: var(--theme-color);
				border-radius: 30rpx;
				font-size: calc(30rpx * var(--font-size-rate));
				color: var(--text-color-white);
			}
		}
	}
}
</style>
